<template>
  <el-card>
    <el-row type="flex" justify="space-between" align="middle">
      <el-col><div v-if="showBefore" class="content">
        <i class="el-icon-info" />
        <span>
          <slot name="left" />
        </span>
      </div></el-col>
      <el-col>
        <el-row type="flex" justify="end">
          <slot name="right" />
        </el-row>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
export default {
  props: { showBefore: {
    type: Boolean,
    default: true
  }}
}
</script>

    <style scoped lang="scss">
      .content {
        display: inline-block;
        padding: 5px 10px;
        border: 1px solid #409eff;
        background-color: #e6f7ff;
        border-radius: 5px;
        i {
          color: #409eff;
          margin-right: 5px;
        }
      }

    </style>

